<template>
	<view :class="product.goods_type == 1?'pt-24':''">
		<view class="mh-box" v-if="product.goods_type == 1">
			<view class="flex flex-ai-center flex-js-sb mb-20">
				<view class="yjh-text">有机会获得</view>
				<view class="tips">单次购买可获得以下藏品任意1个</view>
			</view>
			<w-scroll-view>
				<view class="flex flex-ai-center">
					<view v-for="(item,index) in product.collectionlist" :key="item.id" class="item-box">
						<image :src="$ossUrl + item.listimg" class="item-bg"></image>
						<view class="item-text text-overflow">{{ item.name }}</view>
					</view>
				</view>
			</w-scroll-view>
		</view>
		<view class="product-introduce plr-16 pt-16" v-show="product.introduce_image">
			<!-- <w-big-title :title="product.goods_type==1? '盲盒详情':'藏品故事'"></w-big-title> -->
			<view class="flex flex-dir-col flex-ai-center">
				<view class="x-title">STORY</view>
				<view class="flex flex-ai-center">
					<u-line color="#747474" length="120rpx"></u-line>
					<view class="mlr-8 font-color-white font-size-20 font-w-600">{{ product.goods_type==1? '藏品故事':'藏品故事' }}</view>
					<u-line color="#747474" length="120rpx"></u-line>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<u-parse style="color: #fff;" :content='product.introduce_image  && handleLang(product.introduce_image)'></u-parse>
		</view>
	</view>
</template>
  
<script>
	export default {
		name:"w-product-introduce",
		props: {
			product: {
				type: Object,
				defaul() {
					return {
						batch: {},
						publisher: {},
						series: {},
					}
				}
			},
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.product-introduce{
	// .title{
	// 	font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
	// 	background: linear-gradient(90deg, #DF0007 0%, rgba(0,102,254,0) 100%);
	// 	background-size:40rpx 16rpx;
	// 	background-position:left 16rpx;
	// 	background-repeat: no-repeat;
		
	// }
	.x-title {
		font-family: OPPO Sans 4.0, OPPO Sans 40;
		font-weight: 500;
		font-size: 18rpx;
		color: #575757;
	}
}
.mh-box {
	padding:50rpx 0 50rpx 32rpx;
	background: #151515;
	border-radius: 16px 16px 16px 16px;
	.yjh-text {
		font-family: OPPO Sans 4.0, OPPO Sans 40;
		font-weight: 600;
		font-size: 17px;
		color: #B7B7B7;
	}
	.tips {
		font-family: OPPO Sans 4.0, OPPO Sans 40;
		font-weight: 400;
		font-size: 12px;
		color: #868686;
		margin-right: 32rpx;
	}
	.item-box {
		width: 180rpx;
		height: 232rpx;
		background: #FFFFFF;
		border-radius: 8px 8px 8px 8px;
		margin-right: 16rpx;
		.item-bg {
			width: 100%;
			height: 180rpx;
			border-radius: 8px 8px 0px 0px;
		}
		.item-text {
			font-family: OPPO Sans 4.0, OPPO Sans 40;
			font-weight: 600;
			font-size: 12px;
			color: #757575;
			text-align: center;
			padding: 0 12rpx;
		}
	}
}
</style>